{extend name="public/base" /}
{block name="css"}
{load href="https://cdn.staticfile.org/Swiper/4.5.0/css/swiper.min.css" /}
<style>

  .container-fluid {

  }

  .swiper-container {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .swiper-container .swiper-button-prev::after {
    content: '';
  }
  .swiper-container .swiper-button-next::after {
    content: '';
  }
  .swiper-container .swiper-button-prev{
    background-image: url('https://res.bestyoujia.com/web/DGZJ/toilet/pc/left.png') ;
    left: 50px;
    right: auto;
    width: calc(61px / 1.5);
    height: calc(108px / 1.5);
    background-size: cover;
  }
  .swiper-container .swiper-button-next{
    background: url('https://res.bestyoujia.com/web/DGZJ/toilet/pc/right.png');
    right: 50px;
    width: calc(61px / 1.5);
    height: calc(108px / 1.5);
    left: auto;
    background-size:cover;
  }

  .mx-auto {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .banner {
    width: 100%;
  }

  .order-title {
    font-size: 20px;
    color: #ffffff;
    font-weight: bold;
    margin-top: -5px;
    margin-bottom: 0;
  }

  .order-input {
    width: 360px;
    height: 50px;
    color: #fff;
    border: 1px solid #fff;
    background: transparent;
    padding-left: 10px;
    margin-left: 8px;
  }

  .order-input:nth-child(1) {
    margin-left: 0;
  }

  .order-submit {
    background: #C8582E;
    width: 458px;
    color: #fff;
    border: none;
    padding: 0 18px;
    height: 50px;
    margin-top: 50px;
  }

  .order-submit:hover {
    opacity: .9;
  }

  input::-webkit-input-placeholder {
    /* placeholder颜色  */
    color: #ccc !important;
  }

</style>
{/block}
{block name="main"}
<section class="container-fluid main-container">
  <!-- banner -->
  <img alt="" class="banner" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/pc/zm_pc_01.jpg">
  <!-- banner end -->

  <div class="row" style="display: flex; flex-direction: column; align-items: center; ">
    <div class="max-width mx-auto">
      <img alt="" style="width: 100vw" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/pc/zm_pc_02.jpg">
    </div>
  </div>

  <div class="d-flex align-items-center justify-content-center" style="flex-direction: column; position: relative;background: url('https://res.bestyoujia.com/web/ZMYJ/activities/act202109/pc/eg_bg.png'); background-size: cover; padding: 50px 0 60px">
    <div style="color: #404040; text-align: center; line-height: 30px">
      每一种情绪都定义着一个颜色<br/>
      它藏着你的喜欢<br/>
      左右着你的穿着、你的家园<br/>
      甚至是你爱去的咖啡馆
    </div>
    <div class="swiper-container" style="position:relative; margin-top: 45px; width: 1200px; overflow: hidden">
      <div class="swiper-wrapper" style="width: 1200px">
        <div class="swiper-slide" style="width: 1200px">
          <a href="javascript:void(0)"><img alt="" class="img-fluid" style="width: 1200px" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/pc/case/eg1.png"></a>
        </div>
        <div class="swiper-slide" style="width: 1200px">
          <a href="javascript:void(0)"><img alt="" class="img-fluid" style="width: 1200px" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/pc/case/eg3.png"></a>
        </div>
        <div class="swiper-slide" style="width: 1200px">
          <a href="javascript:void(0)"><img alt="" class="img-fluid" style="width: 1200px" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/pc/case/eg4.png"></a>
        </div>
        <div class="swiper-slide" style="width: 1200px">
          <a href="javascript:void(0)"><img alt="" class="img-fluid" style="width: 1200px" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/pc/case/eg5.png"></a>
        </div>
        <div class="swiper-slide" style="width: 1200px">
          <a href="javascript:void(0)"><img alt="" class="img-fluid" style="width: 1200px" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/pc/case/eg6.png"></a>
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
  </div>

  <div class="row" style="display: flex; flex-direction: column; align-items: center; ">
    <div class="max-width mx-auto">
      <img alt="" style="width: 100vw" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/pc/zm_pc_03.jpg">
    </div>
    <div class="max-width mx-auto">
      <img alt="" style="width: 100vw" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/pc/zm_pc_04.jpg">
    </div>
    <div class="max-width mx-auto">
      <img alt="" style="width: 100vw" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/pc/zm_pc_05.jpg">
    </div>
    <div class="max-width mx-auto">
      <img alt="" style="width: 100vw" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/pc/zm_pc_06.jpg">
    </div>
  </div>

  <div id="act-baoming"  class="d-flex align-items-center justify-content-center" style="position: relative;background: url('https://res.bestyoujia.com/web/ZMYJ/activities/act202109/pc/bm_bg.png'); background-size: cover; padding: 50px 0 420px">
    <div class="wow animate__animated animate__fadeInUp" style="position: relative; width: 100%">
      <div class="mx-auto" style="padding: 20px 27px 20px 20px; position: absolute;
width: 580px; left: 55%;
    height: 360px;
    top: 10px;
background: rgba(255, 255, 255, .2);
margin: 0 auto;">
        <div>
          <div style="display: flex; flex-direction: column">
            <div style=" margin-top: 50px;display: flex; justify-content: center; align-items: center"><div style="color: #fff">您的姓名： </div><input class="order-input" id="act-customer" placeholder="请输入您的姓名"/></div>
            <div style=" margin-top: 40px;display: flex; justify-content: center; align-items: center"><div style="color: #fff">您的电话： </div><input class="order-input" id="act-mobile" placeholder="请输入您的电话"/></div>
            <button class="order-submit">立即预约报名</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row" style="display: flex; flex-direction: column; align-items: center; ">
    <div class="max-width mx-auto">
      <img alt="" style="width: 100vw" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/pc/zm_pc_07.jpg">
    </div>
    <div class="max-width mx-auto">
      <img alt="" style="width: 100vw" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/pc/zm_pc_08.jpg">
    </div>
    <div class="max-width mx-auto">
      <img onclick="document.getElementById('act-baoming').scrollIntoView();" alt="" style="width: 100vw; cursor: pointer" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202109/pc/zm_pc_09.jpg">
    </div>
  </div>
</section>
{/block}
{block name="js"}
{load href="https://cdn.staticfile.org/Swiper/4.5.0/js/swiper.min.js" /}
<script>
  const swiper = new Swiper('.swiper-container', {
    autoplay: {
      delay: 3000,
      stopOnLastSlide: false,
      disableOnInteraction: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });

  $('.order-submit').on('click', function () {

    const customer = $('#act-name').val() || '';
    const mobile = $('#act-mobile').val();

    const mobileStatus = validMobile(mobile);

    switch (mobileStatus) {
      case 1:
        layer.msg('预约中，请稍候...', {
          icon: 16
          ,shade: 0.01
        });

        const data = {
          mobile,
          customer,
        };

        doAppointment(
                data,
                function(res) {
                  console.log('onAppointmentSuccess', res);
                  const { data = '' } = res;
                  if (data) {
                    buryingPoint('APPOINTMENT', data);
                    layer.closeAll();
                    showToast('预约成功', 'success');
                    $('#act-name').val('');
                    $('#act-mobile').val('');
                  }
                },
                function(err) {
                  console.log('onAppointmentError', err);
                  layer.closeAll();
                  showToast('抱歉，预约失败～', 'fail');
                  $('#act-name').val('');
                  $('#act-mobile').val('');
                }
        );
        break;
      case 2:
        showToast('手机号码格式不正确', 'fail');
        break;
      case 3:
        showToast('联系方式不能为空', 'fail');
        break;
    }
  });
</script>
{/block}